import React, { Component } from 'react';
import { Dialog, NavBar,Toast } from 'antd-mobile';
import { RightOutline } from 'antd-mobile-icons'
import service from '../../api'
import './Mine.scss'
class Mine extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            userInfo: {}
        }
    }
    back() {
        this.props.history.replace('/index/home')
    }
    outLogin(){
        Dialog.confirm({
            content:'确定退出登录？',
            onConfirm:  () => {
              localStorage.removeItem('userid')
              localStorage.removeItem('token')
              localStorage.removeItem('tel')
                Toast.show({
                  icon: 'success',
                  content: '退出登录成功',
                  position: 'center',
                })
                setTimeout(() => {
                    this.props.history.push('/index/home')
                }, 1000);
              },
        })
    }
    componentDidMount(): void {
        var token=localStorage.getItem('token')
        if(!token){
            this.props.history.replace('/login')
        }
        service.user.getUserInfo({ userid: localStorage.getItem('userid') }).then(res => {
            console.log(res);
            if (res.data.code === '200') {
                this.setState({
                    userInfo: res.data.data[0]
                })
            }
        })
    }
    toUserset(){
        this.props.history.push('/userset')
    }
    render() {
        return (
            <div className='mine'>
                <header>
                    <NavBar onBack={() => { this.back() }}>我的</NavBar>
                </header>
                <div className="usermessage">
                    <div className='pic'>
                        <img src={'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F11%2F20210711101603_fd40d.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1679657457&t=9e004d6766a5b3ac2866ff3b10da514d'} alt="" />
                    </div>
                    <div className="nicktel">
                    <p >{this.state.userInfo.username === '' ? '你好' : this.state.userInfo.username}</p>
                        <span>{this.state.userInfo.tel} </span>
                    </div>
                </div>
                <div className="set">
                    <div onClick={()=>{this.toUserset()}}>
                        <span>绑定用户名</span>
                        <RightOutline/>
                    </div>
                    <div onClick={()=>{this.props.history.push('/changepass')}}>
                        <span>更改密码</span>

                        <RightOutline/>
                    </div>
                    <div onClick={()=>{this.outLogin()}}>
                        <span>退出登录</span>
                        <RightOutline/>
                    </div>
                </div>
            </div>
        );
    }
}

export default Mine;